<template>
<!--  单组计算单一容器聚合图-->
  <div class="total" v-if="caculateResult">
    <div class="result">
      <!--   spss结果展示-->
      <div class="spss">
        <div class="detailed_conclusions">
          <div class="totaltitle totaltitle1">
            <div class="blue-rectangle"></div>
            <h1>详细结论</h1>
          </div>
          <div class="conclusioncontent">
            <div class="titled1">
              <span style="font-weight: bold"
                >输出结果1：图10溶解液出口处铀浓度变化</span
              >
            </div>
            <div class="map-bt flex flex-column">
              <SingleChart10
                :caculateResult="caculateResult.data"
              ></SingleChart10>
              <button @click="getExcelFile(0)" >导出Excel</button>
            </div>
            <div class="">
              <span style="font-weight: bold">图表说明</span>
            </div>
            <div class="stepscontent">
              <div>
                <div>
                  1、该图代表在单一模型中铀浓度随时间变化的曲线。图像横坐标是时间，单位为min;纵坐标为溶解器中铀浓度，单位为g/L。
                </div>
                <div>
                  2、溶液中铀浓度初始为0
                  g/L，随着反应的进行，溶液中铀浓度逐渐增大。
                </div>
              </div>
            </div>
          </div>
          <div class="conclusioncontent">
            <div class="titled1">
              <span style="font-weight: bold"
                >输出结果2：图11溶解液出口处硝酸浓度变化</span
              >
            </div>
            <div class="map-bt flex flex-column">
              <SingleChart11
                :caculateResult="caculateResult.data"
              ></SingleChart11>
              <button @click="getExcelFile(1)" >导出Excel</button>
            </div>
            <div class="">
              <span style="font-weight: bold">图表说明</span>
            </div>
            <div class="stepscontent">
              <div>
                <div>
                  1、该图代表在单一模型中硝酸浓度随时间变化的曲线。图像横坐标是时间，单位为min;纵坐标为溶解器中硝酸浓度，单位为mol/L。
                </div>
                <div>2、随着反应的进行，溶液中硝酸浓度逐渐减小。</div>
              </div>
            </div>
          </div>
          <div class="conclusioncontent">
            <div class="titled1">
              <span style="font-weight: bold"
                >输出结果3：图12溶解过程氮氧化物生成速率变化</span
              >
            </div>
            <div class="map-bt flex flex-column">
              <!--              <RandomSequenceChart ></RandomSequenceChart>-->
              <SingleChart12
                :caculateResult="caculateResult.data"
              ></SingleChart12>
              <button @click="getExcelFile(2)" >导出Excel</button>
            </div>
            <div class="">
              <span style="font-weight: bold">图表说明</span>
            </div>
            <div class="stepscontent">
              <div>
                <div>
                  1、该图代表在单一模型中氮氧化物生成速率随时间变化的曲线。图像横坐标是时间，单位为min;纵坐标为溶解器中氮氧化物生成速率，单位为mol/min。
                </div>
                <div>
                  2、在该溶解反应中，每3mol硝酸与1mol二氧化铀反应，可以生成0.5mol的一氧化氮和0.5mol的二氧化氮，生成的氮氧化物就是一氧化氮和二氧化氮。
                </div>
                <div>
                  3、反应开始阶段，由于容器中硝酸浓度处于最高值，反应速率最快，随着反应的进行，反应速率逐渐减小。
                </div>
                <!--                <div>●随机数据:这些是时间序列数据中的波动。</div>-->
              </div>
            </div>
          </div>
          <div class="conclusioncontent">
            <div class="titled1">
              <span style="font-weight: bold"
                >输出结果4：图14-1不同温度下铀浓度变化</span
              >
            </div>
            <div class="map-bt flex flex-column">
              <!--              <RandomSequenceChart ></RandomSequenceChart>-->
              <SingleChart14U
                :caculateResult="caculateResult.data"
              ></SingleChart14U>
              <button @click="getExcelFile(3)" >导出Excel</button>
            </div>
            <div class="">
              <span style="font-weight: bold">图表说明</span>
            </div>
            <div class="stepscontent">
              <div>
                <div>
                  1、该图代表在单一模型中不同温度下铀浓度随时间变化的曲线，其中温度分别为（<span
                    >{{ caculateResult.model_ParaKey.temp_list }}℃</span
                  >）。图像横坐标是时间，单位为min;纵坐标为溶解器中铀浓度，单位为g/L。
                </div>
                <div>
                  2、不同温度下溶解反应的速率不同。温度越高，反应速率越快，溶液中铀浓度增加速率越大；温度越低，反应速率越慢，溶液中铀浓度增加速率越小。
                </div>
              </div>
            </div>
          </div>
          <div class="conclusioncontent">
            <div class="titled1">
              <span style="font-weight: bold"
                >输出结果5：图14-2不同温度下硝酸浓度变化</span
              >
            </div>
            <div class="map-bt flex flex-column">
              <!--              <RandomSequenceChart ></RandomSequenceChart>-->
              <SingleChart14N
                :caculateResult="caculateResult.data"
              ></SingleChart14N>
              <button @click="getExcelFile(0)" >导出Excel</button>
            </div>
            <div class="">
              <span style="font-weight: bold">图表说明</span>
            </div>
            <div class="stepscontent">
              <div>
                <div>
                  1、该图代表在单一模型中不同温度下硝酸浓度随时间变化的曲线，其中温度分别为（<span
                    >{{ caculateResult.model_ParaKey.temp_list }}℃</span
                  >）。图像横坐标是时间，单位为min;纵坐标为溶解器中硝酸浓度，单位为mol/L。
                </div>
                <div>
                  2、不同温度下溶解反应的速率不同。温度越高，反应速率越快，溶液中硝酸消耗速率越大；温度越低，反应速率越慢，溶液中硝酸消耗速率越小。
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="functionbutton" v-if="showExport">
        <el-button @click="exportJson" style=""><a>导出</a></el-button>
      </div>
    </div>
  </div>
</template>
<script>

import SingleChart12 from "@/views/dissolutionratechart/singlechart/SingleChart12";
import SingleChart10 from "@/views/dissolutionratechart/singlechart/SingleChart10";
import SingleChart11 from "@/views/dissolutionratechart/singlechart/SingleChart11";
import SingleChart14U from "@/views/dissolutionratechart/singlechart/SingleChart14-U";
import SingleChart14N from "@/views/dissolutionratechart/singlechart/SingleChart14-N";
import { dayjs } from "element-plus";
export default {
  name: "single_caculate",
  props: {
    showExport :{
      type : Boolean,
      default:true
    },
    IsSave: {
      type: String,
      default: "",
    },
    caculateResult: {
      type: Object,
      default: function () {
        return {};
      },
    },
    baseUrl: {
      type: String,
    },
    params:{
      type:Object,
      default: function () {
        return {};
      },
    }
  },
  components: {
    SingleChart14N,
    SingleChart14U,
    SingleChart10,
    SingleChart11,
    SingleChart12,
    // RandomSequenceChart,
  },
  data() {
    return {
      dialogFormVisible: true,
      form: {},
      config: {
        model: "单一容器模型",
        parameter:
          "向后预测单位:{12]}:季节性周期长度:{12];是否参数自动寻优:{是}\n",
        variate: "时间序列变量:{年度销量}\n",
      },
      // caculateResult: {},
      noResult: false,
      waitFinished: false,
      errorText: "计算失败",
      waitTime: 0,
      param_table: [],
      file_path: "-1",
      username: "",
      requestExcel:"",
      variable:null,
    };
  },
  created() {
    // console.log("temp_list\n");
    // console.log(this.caculateResult.model_ParaKey.temp_list);
  },
  mounted() {
    this.username = localStorage.getItem("username");
    // 在组件挂载后开始计时
  },
  computed: {
    isReturnRes() {
      return this.caculateResult.length > 0;
    },
  },
  methods: {
   async getExcelFile(index){
     switch (index){
       case 0:
         this.requestExcel = "Ur_generation"
         break;
       case 1:
         this.requestExcel= "Nitric_acid_concentration"
         break;
       case 2:
         this.requestExcel= "NOx_generation"
         break;
       case 3:
         this.requestExcel= "diffTempUranium"
         break;
       case 4:
         this.requestExcel= "diffTempAcid"
         break;
     }
     // console.log('[this.params]',JSON.stringify([this.params]))
      const formData = new FormData();
      formData.append("id", this.caculateResult.ObjectId);
      formData.append("username", this.username);
      formData.append('table_name',this.requestExcel)
      formData.append('params',[this.params])
      formData.append('variable',this.variable)
      const baseUrl = this.baseUrl;
      // console.log(baseUrl);
      await fetch("" + baseUrl + "/download/exportExcel", {
        method: "POST",
        body: formData,
      })
          .then((response) => response.blob())
          .then((blob) => {
            const url = URL.createObjectURL(blob);
            const link = document.createElement("a");
            link.href = url;
            link.download = this.requestExcel+dayjs().format("YYYYMMDDHHmmss")+ ".xlsx"
            link.click();
          })
          .catch((error) => {
            console.error("文件下载失败:", error);
          });



    },
    useParam() {
      // let historyparam = [...this.caculate_info]
      // this.$emit("sethistoryparam", this.single_caculate_info_clone)
      // this.toPageCaculate()
    },
    async exportJson() {
      if (this.IsSave !== "Yes") {
        this.$message.error("计算结果文件未选择保存，不可导出");
        return;
      }
      // console.log("获取id:\n");
      // console.log(this.caculateResult.ObjectId);
      const formData = new FormData();
      formData.append("id", this.caculateResult.ObjectId);
      formData.append("username", this.username);
      const baseUrl = this.baseUrl;
      // console.log(baseUrl);
      await fetch("" + baseUrl + "/cal/getJsonFile", {
        method: "POST",
        body: formData,
      })
        .then((response) => response.blob())
        .then((blob) => {
          const url = URL.createObjectURL(blob);
          const link = document.createElement("a");
          link.href = url;
          link.download =
            this.caculateResult.ObjectId +
            "/" +
            dayjs().format("YYYY-MM-DD-HH:mm:ss") +
            ".json";
          link.click();
        })
        .catch((error) => {
          console.error("文件下载失败:", error);
        });
    },

    startTimer() {
      const interval = 1000; // 每隔1秒更新一次
      const maxWaitTime = 15; // 最大等待时间为10秒
      let currentWaitTime = 0;

      const timer = setInterval(() => {
        if (this.noResult || currentWaitTime >= maxWaitTime) {
          clearInterval(timer);

          // this.waitFinished = true;
        } else {
          currentWaitTime++;
          this.waitTime = currentWaitTime;
        }
      }, interval);
    },

    load() {
      this.request
        .get("/orderslist", {
          params: {
            pageNum: this.pageNum,
            pageSize: this.pageSize,
            uid: this.uid,
            mid: this.orderId,
          },
        })
        .then((res) => {
          // console.log(res)
          this.tableData = res.data;
          this.total = res.total;
        });
    },
    toPageCaculate() {
      this.$router.push("/1/S_C");
      this.$emit("addtab", {
        title: "单一容器", // 页面标题
        route: "/1/S_C", // 路由
        selected: true, // 设置选中状态
      });
    },
    goBack() {
      // 使用Vue Router的go(-1)方法返回前一个历史记录
      // router.go(-1);
      this.$router.push("/1/S_C");
      this.$emit("addtab", {
        title: "单一容器", // 页面标题
        route: "/1/S_C", // 路由
        selected: true, // 设置选中状态
      });
    },
  },
};
</script>

<style lang="scss" scoped>
.result {
  height: 100vh;
}

.loading {
  width: 100%;
  height: 100vh;
  background-color: rgb(255, 255, 255, 0.8);
  display: flex;
  justify-content: center;
  align-items: center;
}

.error {
  width: 100%;
  height: 100%;
  //background-color: rgba(241, 130, 130, 0.8);
  display: flex;
  justify-content: center;
  align-items: center;

  img {
    display: flex;
    width: 20vw;
    //height: 50%;
  }
}

/*
loading的效果
*/

.total {
  display: flex;
  flex-direction: column;
  height: 100%;
  //width: 100%;
  //overflow: auto;
  padding: 20px 20px 100px 20px;
  background-color: white;
  font-size: 14px;
  font-weight: 500;
}

.spss {
  /*background-color: #F9F7F7;*/
}

.backbutton {
  color: white;
  width: 100px;
  height: 40px;
  font-size: 15px;
  border-radius: 15px;
  margin-top: 0px;
  margin-bottom: 5px;
  background-color: #3f72af;
}

.functionbutton {
  //margin-top: 5%;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  margin: 50px;
  height: 100px;

  button {
    display: flex;
    border-radius: 4px;
    width: 80px;
    height: 30px;
    border: 1.2px solid #409eff;
  }
}

/*标题小矩形*/
.blue-rectangle {
  width: 10px;
  height: 30px;
  background-color: #409eff;
  margin-right: 10px;
}

.processcontent {
  margin-left: 20px;
  margin-top: 10px;
  margin-bottom: 10px;
}

.stepscontent {
  //margin-left: 20px;
  margin-top: 10px;
  margin-bottom: 10px;
  display: flex;
  flex-direction: row;
  width: 90%;
  >div{
    padding: 10px 0 0 0;
  }
  div:last-child {
    width: 100%;
    padding: 0 10px 60px 0;
    background-color: white;
    //border: 1px solid #DCDFE6;
    border-radius: 4px;
  }

  div {
    div {
      font-weight: 500;
      font-size: 14px;

      span {
        //color: #d65046;
        color: #409eff;
        font-weight: bold;
      }
    }

    div:not(:last-child) {
      margin-bottom: 20px;
    }
  }
}

.detailed_conclusions {
  .conclusioncontent:not(:nth-of-type(2)) {
    .titled1 {
      margin-top: 80px;
    }
  }
}

.conclusioncontent {
  margin-left: 20px;
  margin-top: 10px;
  margin-bottom: 10px;

  .titled1:not(:first-of-type) {
    margin-top: 30px;
  }
}

.totaltitle {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-top: 10px;
  margin-bottom: 10px;
}

.totaltitle1 {
  margin-top: 60px;
}

.title_1 {
  display: flex;
  flex-direction: row;
  align-items: center;
  margin-bottom: 10px;
}

.title_1 > img {
  width: 30px;
  margin-right: 10px;
}

.datafilename {
  width: 40vw;
  margin-left: 10px;
  //color: blue;
  //text-decoration: underline;
}

.algorithmconfigure {
  margin-left: 10px;
}

.analyzeresults {
  margin-left: 40px;
}

.arrow {
  display: flex;
  flex-direction: row;

  > div {
    margin-bottom: 10px;
  }
}

.arrow > img {
  text-align: left;
  width: 30px;
}

.sequencechart {
  display: flex;
  //width: 100%;
  justify-content: center;
  margin-top: 10px;
}


</style>

<style lang="scss" >
.map-bt{
  cursor: pointer;
  button{
    padding: 0 10px;
    height: 30px;
    margin: 0 0 20px 50%;
    width: 100px;
    background-color: #FFFFFF;
    border-radius: 4px;
    border: 1.2px solid #409eff;
  }
}
</style>
